<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 10px solid #000;
        }

        p{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
   <div id="box">
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
       <p>我是MT</p>
   </div>

<script>
    var box = document.getElementById("box");

    // 1. width 和 height
   /* // border + padding + 内容的宽度和高度
    console.log(box.offsetWidth, box.offsetHeight);
    // padding + 内容的宽度和高度
    console.log(box.clientWidth, box.clientHeight);
    // 能够滚动的内容的 宽度 和 高度
    console.log(box.scrollWidth, box.scrollHeight);*/


    // 2. top 和 left
    // 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
    console.log(box.offsetLeft, box.offsetTop);
    // clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
    console.log(box.clientLeft, box.clientTop);
    // scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;
    console.log(box.scrollLeft, box.scrollTop);
</script>
</body>
</html>